<template>
    <div class="table-merge-edit" style="width: 100%;height: 100%;">
      <el-table @cell-click="handleCellClick"
                :span-method="objectSpanMethod"
                :data="tableData"
                border
                style="width: 100%">
        <el-table-column
          prop="text1"
          label="零部件项目"
          width="180">
        </el-table-column>
        <el-table-column
          prop="text2"
          label="零部件项目"
          width="180">
        </el-table-column>
        <el-table-column
          prop="text3"
          label="标配"
          width="180">
        </el-table-column>
        <el-table-column
          prop="text4"
          label="选配"
          width="180">
        </el-table-column>
        <!--编辑单元格-->
        <el-table-column
          label="价格"
          width="180">
          <template scope="scope">
            <div class="input-box">
              <el-input size="small" v-model="scope.row.text5"></el-input>
            </div>
          </template>
        </el-table-column>
        <!--编辑/显示可通过点击单元格自由切换-->
        <el-table-column
          label="备注">
          <template scope="scope">
            <div class="input-box" v-show="!scope.row.isShow">
              <el-input size="small" v-model="scope.row.text6"></el-input>
            </div>
            <span v-show="scope.row.isShow">{{scope.row.text6}}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--测试数据使用-->
      <div class="data-table">{{JSON.stringify(tableData)}}</div>
    </div>
</template>
<script>
import { mixinColMerage } from './mixins'

export default {
  name: 'index',
  mixins: [mixinColMerage],
  data () {
    return {}
  },
  mounted () {
    this.initData()
    this.columnMerageInit()
  },
  methods: {}
}
</script>
